<template>
    <div class="page show-confirm-wrapper">
        <p class="show-confirm-title">myConfirm展示</p>
        <my-button class="button-item" @button-click="handleClick" text="基础调用" size="lang" />
        <my-button class="button-item" @button-click="handleClickNotMaskHide" text="点击遮罩层不关闭" size="lang" />
        <my-button class="button-item" @button-click="handleClickNotMask" text="不显示遮罩层" size="lang" />
        <my-button class="button-item" @button-click="handleClickShowCancel" text="显示取消按钮" size="lang" />
        <my-button class="button-item" @button-click="handleClickButton" text="自定义按钮文字" size="lang" />
        <my-button class="button-item" @button-click="handleClickAsync" text="async调用" size="lang" />
        <my-button class="button-item" @button-click="pushLink" text="查看demo源码" size="lang" />
    </div>
</template>

<script>
    import MyButton from '../components/myButton'
    export default {
        name: 'showConfirm',
        components: {
            MyButton
        },
        methods: {
            handleClick() {
                this.$myConfirm.show('基础调用')
            },
            handleClickNotMaskHide() {
                this.$myConfirm.show({
                    content: '点击遮罩层不关闭',
                    maskHide: false
                })
            },
            handleClickNotMask() {
                this.$myConfirm.show({
                    content: '不显示遮罩层',
                    isMaskLayer: false
                })
            },
            handleClickShowCancel() {
                this.$myConfirm.show({
                    content: '显示取消按钮',
                    isShowCancelBtn: true,
                    success() {
                        this.$toast.show({
                            time: 1000,
                            text: '点击了确定'
                        })
                    },
                    cancel() {
                        this.$toast.show({
                            time: 1000,
                            text: '点击了取消'
                        })
                    }
                })
            },
            handleClickButton() {
                this.$myConfirm.show({
                    content: '自定义按钮文字',
                    isShowCancelBtn: true,
                    confirmVal: '下一步',
                    cancelVal: '关闭',
                    success() {
                        this.$toast.show({
                            time: 1000,
                            text: '点击了下一步'
                        })
                    },
                    cancel() {
                        this.$toast.show({
                            time: 1000,
                            text: '点击了关闭'
                        })
                    }
                })
            },
            async handleClickAsync() {
                await this.$myConfirm.show('async调用')
                this.$toast.show({
                    time: 1000,
                    text: '确定了'
                })
            },
            pushLink() {
                this.$router.push(`/soundCodeShow${this.$route.fullPath}`)
            }
        }
    }
</script>

<style scoped>
    .show-confirm-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .show-confirm-wrapper .show-confirm-title {
        text-align: left;
        padding: .2rem;
        font-size: .5rem;
        color:cadetblue;
    }
    .show-confirm-wrapper .button-item {
        margin-top: .4rem;
    }
</style>
